<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../assets/stylus/variable.styl';
@import '../../assets/stylus/mixin.styl';

.index-aboutme
	height 95vh !important
	min-height 600px !important
	.aboutme-body
		display flex
		align-items center
		position relative
		height 80%
		color #fff
	h2,
	h3
		margin 0
		padding-left 10px
		line-height 1.5em
		font-weight 200
	h2
		font-size 2em
	h3
		font-size 3em
		strong
			font-weight 500
	p
		padding-left: 10px;
		margin: 1.5em 0 1em;
		font-size: 1.1em;
	.my-sns-links
		a
			display inline-block
			vertical-align middle
			width 2.2em
			height 2.2em
			margin 0 10px
			line-height 2.2em
			border 1px solid currentColor
			border-radius 100%
			font-size 1.3em
			color inherit
			transition .2s ease-in
			svg
				width 100%
				fill currentColor
			&:hover
				background rgba(255, 255, 255, .5)
</style>
<template>
<headerBanner
	class="index-aboutme"
	:photoGraphaList="photoGraphaList"
	:photoGraphaIndex="photoGraphaIndex"
	@nextIndex="nextIndex"
>
	<div class="aboutme-body">
		<Container>
			<h2>
				你好！
				<br>我是
				<strong>剧中人</strong>
			</h2>
			<h3>你是谁？</h3>
			<p>90后天蝎男，前端工程师，全栈开发尝试者</p>
			<div class="my-sns-links">
				<a href="https://github.com/bh-lay?from=bh-lay" title="github" target="_blank">
					<svg viewBox="-470 -470 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg">
						<path
							d="M787.696941 669.515294c0 44.935529-23.431529 118.181647-78.787765 118.181647-55.416471 0-78.848-73.246118-78.848-118.181647 0-44.875294 23.431529-118.181647 78.848-118.181647 55.356235 0 78.787765 73.306353 78.787765 118.181647zM315.090824 551.333647c-55.356235 0-78.787765 73.306353-78.787765 118.181647 0 44.935529 23.431529 118.181647 78.787765 118.181647 55.356235 0 78.787765-73.246118 78.787765-118.181647 0-44.875294-23.431529-118.181647-78.787765-118.181647zM1024 561.212235c0 68.367059-6.746353 140.950588-37.526588 203.715765-81.257412 164.321882-304.609882 180.284235-464.594824 180.284235-162.454588 0-399.36-14.095059-483.689412-180.284235-31.442824-62.162824-38.189176-135.348706-38.189176-203.715765 0-89.871059 24.636235-174.742588 83.727059-243.651765-11.083294-33.852235-16.624941-69.571765-16.624941-104.688941 0-46.140235 10.420706-92.220235 31.382588-134.144 97.219765 0 159.382588 42.465882 233.231059 100.291765 62.162824-14.757647 126.132706-21.504 190.162824-21.504 57.825882 0 116.314353 6.204235 172.333176 19.696941 73.246118-57.223529 135.348706-98.484706 231.363765-98.484706 20.961882 41.863529 31.382588 88.003765 31.382588 134.144 0 35.117176-5.541647 70.174118-16.624941 103.424 59.090824 69.511529 83.666824 155.045647 83.666824 244.916706zM886.121412 669.515294c0-94.147765-57.163294-177.212235-157.515294-177.212235-40.598588 0-79.329882 7.408941-119.988706 12.950588-31.984941 4.939294-63.969882 6.746353-96.617412 6.746353s-64.632471-1.807059-96.617412-6.746353c-39.996235-5.541647-79.390118-12.950588-119.988706-12.950588-100.291765 0-157.515294 83.064471-157.515294 177.212235 0 188.295529 172.272941 217.208471 322.439529 217.208471l103.424 0c150.166588 0.060235 322.379294-28.912941 322.379294-217.208471z"
						></path>
					</svg>
				</a>
				<a href="https://www.zhihu.com/people/imju-zhong-ren?from=bh-lay" title="知乎" target="_blank">
					<svg viewBox="-460 -460 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg">
						<path
							d="M351.791 562.47h192.946c0-45.368-21.388-71.94-21.388-71.94H355.898c3.977-82.183 7.541-187.659 8.817-226.835h159.282s-0.863-67.402-18.578-67.402H225.44s16.851-88.142 39.319-127.054c0 0-83.605-4.51-112.122 106.962s-71.291 178.876-75.828 191.19c-4.536 12.313 24.628 5.832 36.942 0 12.313-5.833 68.05-25.925 84.253-103.696h86.57c1.166 49.286 4.597 200.335 3.515 226.835H109.861c-25.276 18.147-33.701 71.94-33.701 71.94h203.708c-8.497 56.255-23.417 128.763-44.275 167.21C202.54 790.6 185.04 846.338 65.79 942.256c0 0-19.442 14.258 40.83 9.074 60.274-5.185 117.306-20.74 156.84-99.807 20.554-41.107 41.806-93.251 58.387-146.139l-0.055 0.186 167.856 193.263s22.036-51.848 5.833-108.88L371.046 650.61l-42.125 31.158-0.045 0.151c11.7-41.02 20.112-81.575 22.727-116.859 0.062-0.849 0.126-1.716 0.188-2.592zM584.919 182.034v668.84h70.318l28.807 80.513 121.876-80.513h153.6v-668.84H584.92z m302.231 596.9h-79.837l-99.58 65.783-23.536-65.782h-24.855V256.674h227.807v522.26z"
						></path>
					</svg>
				</a>
				<a href="https://720yun.com/u/19023widcyv?from=bh-lay" title="720云" target="_blank">
					<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
						<path
							d="M702.262 425.085c-5.118 0-10.263 0.297-15.438 0.902v-0.902c0-93.633-76.166-169.813-169.802-169.813-93.634 0-169.812 76.167-169.812 169.813v0.902a132.685 132.685 0 0 0-15.438-0.902c-76.612 0-138.936 62.325-138.936 138.936s62.313 138.936 138.936 138.936H702.25c8.529 0 15.438-6.899 15.438-15.439 0-8.541-6.909-15.438-15.438-15.438H331.773c-59.587 0-108.046-48.48-108.046-108.058 0-68.834 65.538-123.278 136.312-104.192a15.317 15.317 0 0 0 14.173-3.272 15.446 15.446 0 0 0 5.159-13.614c-0.885-6.784-1.294-12.475-1.294-17.868 0-76.611 62.313-138.934 138.934-138.934 76.623 0 138.924 62.313 138.924 138.934 0 5.393-0.411 11.083-1.301 17.868a15.541 15.541 0 0 0 5.166 13.614 15.448 15.448 0 0 0 14.172 3.272c70.831-19.144 136.313 35.357 136.313 104.192 0 18.323-4.72 36.477-13.648 52.519-4.174 7.456-1.493 16.828 5.953 20.991 7.444 4.161 16.84 1.482 20.989-5.94 11.506-20.639 17.583-43.988 17.583-67.569 0-76.611-62.324-138.936-138.936-138.936h0.036v-0.002z"
						></path>
						<path
							d="M456.417 514.444c-10.411 18.667-18.187 33.718-23.306 45.12-5.125 11.413-9.293 22.53-12.508 33.329-3.215 10.81-5.678 22.108-7.395 33.91h-28.842c2.771-16.784 7.663-33.788 14.674-50.991 7.001-17.193 16.688-35.746 29.041-55.63h-61.41v-22.109h89.747l-0.001 16.371zM503.541 604.441h54.594v22.361h-85.596v-9.556c0-6.704 1.236-12.829 3.705-18.369 2.463-5.542 5.855-10.707 10.177-15.496 4.321-4.8 11.019-10.41 20.106-16.829 8.313-6.201 14.128-11.709 17.458-16.499 3.317-4.79 4.982-9.874 4.982-15.245 0-11.584-6.316-17.374-18.943-17.374-11.083 0-21.664 4.433-31.749 13.292v-23.932c11.249-7.252 23.882-10.877 37.899-10.877 12.853 0 23.018 3.283 30.498 9.84 7.48 6.567 11.219 15.608 11.219 27.136 0 6.431-1.079 12.235-3.243 17.412-2.155 5.175-5.29 10.046-9.384 14.584-4.105 4.537-10.671 9.998-19.701 16.373-8.697 6.203-14.54 10.991-17.532 14.378-2.996 3.375-4.49 6.316-4.49 8.801zM575.089 564.558c0-22.269 4.104-39.281 12.304-51.024 8.197-11.744 20.056-17.616 35.563-17.616 29.59 0 44.376 21.881 44.376 65.641 0 21.563-4.014 38.188-12.052 49.907-8.026 11.723-19.634 17.585-34.81 17.585-30.25-0.002-45.381-21.508-45.381-64.493z m27.176-0.672c0 29.702 6.346 44.548 19.032 44.548 12.467 0 18.693-15.29 18.693-45.871 0-30.694-6.061-46.042-18.198-46.042-13.016 0-19.527 15.792-19.527 47.365z"
						></path>
					</svg>
				</a>
				<a href="https://bh-lay.tuchong.com?from=bh-lay" title="图虫" target="_blank">
					<svg viewBox="-300 -300 1624 1624" version="1.1" xmlns="http://www.w3.org/2000/svg">
						<path
							d="M816.013303 452.583917c-9.852001 109.223423 12.892743 212.973512 57.895712 318.304787-239.367146-49.989785-469.125549-13.257632-704.114028 39.529635 7.176149-48.651859 27.123411-89.397791 32.961634-133.670982C221.852477 535.292077 198.256325 389.336501 160.064616 254.205963c-12.162965-43.056895-20.190521-46.705785 18.244447-34.54282 139.144316 44.273192 304.925526 57.165934 450.272954 50.476304-4.378667 17.636299-8.878964 35.272598-13.257632 53.030526-117.615869 0.486519-235.231738 0.364889-350.536643-27.123411-25.663856-6.081482-33.083264 1.094667-25.663856 24.812448 42.327117 136.225205 40.381043 273.909966 8.757335 418.284357 167.970543-40.624302 332.657085-48.895118 498.195035-45.489488 28.218078 0.608148 37.82682-4.013778 27.853189-35.150968-22.136596-69.815418-30.529041-142.063428-23.596152-215.406105C770.402186 458.057251 793.390189 454.165103 816.013303 452.583917z"
							p-id="1991"
						></path>
						<path
							d="M628.946906 324.994417c4.378667-17.636299 8.878964-35.272598 13.257632-53.030526 13.257632 1.216296 25.542226-9.487112 18.366077 28.096449-13.379261 69.937047 6.203112 74.194085 82.82979 75.288752 8.392446 0.12163 14.595558-1.824445 16.176743 8.149186 4.986816 32.718375 19.704003 26.150374 46.827414 27.60993 19.460744 1.094667 5.473334 16.541632 3.892149 25.907115-22.623114 1.581185-45.611118 5.473334-65.923269-9.608742-7.05452-13.86578-5.838223-15.325336-25.663856-15.811854C657.043354 410.621689 638.434018 382.160352 628.946906 324.994417z"
						></path>
					</svg>
				</a>
			</div>
		</Container>
	</div>
</headerBanner>
</template>

<script>
import headerBanner from '@/components/header-banner/index.vue'
import image1 from './images/aboutme.jpg'
import image2 from './images/aboutme_2.jpg'
let globalPhotoGraphaIndex = 0

export default {
	name: 'index-about-me',
	components: { headerBanner },
	data () {
		return {
			photographyLoaded: false,
			photoGraphaList: [
				{
					title: '随处撸码',
					author: '剧中人',
					imgSrc: image2,
					htmlSrc: 'https://bh-lay.tuchong.com/14977204/'
				},
				{
					title: '办公室背影',
					author: 'Oo浪沫',
					imgSrc: image1,
					htmlSrc: 'https://bh-lay.tuchong.com/'
				}
			],
			photoGraphaIndex: globalPhotoGraphaIndex
		}
	},
	methods: {
		nextIndex (index) {
			globalPhotoGraphaIndex = index
		}
	}
}
</script>
